<template>
  <div class='commit-more'>

    <van-cell-group inset>

      <template v-if="list">
        <div class="listNum" v-if="list.length">全部评论({{list.length}})</div>
        <van-list v-model="loading" :finished="finished" :finished-text="!loading?'没有更多了~':''" :error.sync="err" error-text="加载失败，点击这里重试" @load="getProductCommit">
          <van-cell class="commit_item" v-for="(item, index) in list" :key="index">
            <template #icon>
              <van-image class="usercover" :src="`${resourceURL}${item.avatar}`" fit="cover" />
            </template>
            <template #title>
              <div class="username">
                <span>{{item.nick_name}}</span>
                <span>{{formatCreateTime(item.add_time)}}</span>
              </div>
              <div class="content">{{item.content}}</div>
              <div class="evaluate_pic">
                <van-image v-for="(url, index) in item.images" :key="index" :src="`${resourceURL}${url}`" fit="cover" @click="imagePreviews(item.images,index)" />
              </div>
            </template>
          </van-cell>
        </van-list>
      </template>
      <van-empty v-else class="empty" description="暂无评价" />
    </van-cell-group>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant'
export default {
  data () {
    return {
      list: [],
      err: false,
      loading: false,
      finished: false,
      page: 1,
      limit: 6,
    }
  },
  computed: {
    // 格式化评论时间
    formatCreateTime () {
      return function (val) {
        return this.$moment(Number(val) * 1000).calendar(null, {
          sameDay: '[今天]',
          nextWeek: 'YYYY-MM-DD',
          lastDay: '[昨天]',
          lastWeek: 'YYYY-MM-DD',
          sameElse: 'YYYY-MM-DD'
        });
      }
    }
  },
  methods: {
    // 获取商品评价
    getProductCommit () {
      this.loading = true
      if (this.loading) Toast.loading({ message: '加载中...', forbidClick: true })
      this.$axios.get(this.$api.getproductcommit, {
        params: {
          product_id: this.$route.query.id,
          page: parseInt(this.list.length / this.limit) + 1,  //页码
          limit: this.limit,  //每页条数
        }
      }).then(res => {
        if (res.data.code == 1) {
          Toast.clear()
          let result = res.data.data.data
          this.list.push(...result)
          this.loading = false
          if (result.length < this.limit) {
            this.finished = true // 大于所有条数则结束加载
          }
          if (result.length > this.limit) this.page++
        } else {
          // 加载失败时
          this.err = true
          this.loading = false
        }
      })
    },
    // 图片预览
    imagePreviews (array, index) {
      let newArr = []

      for (let index = 0; index < array.length; index++) {
        if (array[index].indexOf(this.resourceURL) == -1) {
          let element = this.resourceURL + array[index];
          newArr.push(element)
        } else {
          newArr = array
          break;
        }
      }
      ImagePreview({
        images: newArr,
        startPosition: index,
      });
    },
  },
}
</script>

<style scoped lang='less'>
.listNum {
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #303030;
  margin: 16px 0 12px 16px;
}
.commit-more::after {
  content: '';
  display: block;
  clear: both;
}
.commit-more {
  padding: 12px 0;
  box-sizing: border-box;

  .commit_item {
    .usercover {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      overflow: hidden;
    }
    .username {
      display: flex;
      justify-content: space-between;
      color: #909090;
      span:nth-child(1) {
        font-size: 14px;
      }
      span:nth-child(2) {
        font-size: 12px;
      }
    }
    .content {
      margin-top: 5px;
    }
    .evaluate_pic {
      display: flex;

      .van-image {
        width: 84px;
        height: 84px;
        border-radius: 10px;
        margin-top: 8px;
        overflow: hidden;
        margin-left: 6px;
      }
    }
  }
  .empty {
    padding: 0 0 10px;
    /deep/ .van-empty__image {
      width: 106px;
      height: 106px;
    }
  }
}
</style>
